<template>
  <div class="">
    <div class="index_search">
      <div>
        <div @click="goBack" class="go_back">
          <span class="iconfont icon-icon4"></span>
        </div>
        <div class="search_content ">
          <div class="search_type" @click="changeTypeShow">
            <div>{{getSearchType}}</div>
            <div id="icon-xiala" class="iconfont icon-xiala"></div>
          </div>
          <div class="input">
            <input type="text" v-model="inputValue" @input="searchGo()" placeholder="请输入关键词">
          </div>
          <div class="chahao">
            <span @click="chaHao" v-if="searchOrCancel === true" class="iconfont icon-chahao"></span>
          </div>
        </div>
        <div class="go_del">
          <span v-if="searchOrCancel === false" @click="cancelSearch">取消</span>
          <span v-else @click="searchResult()">搜索</span>
        </div>
      </div>
      <div v-show="searchTypeShow" class="background_modal">
        <div class="search_type_list ">
          <div @click="searchInformation(item.diyname,item.name)" :class="{type_color:typeColor === item.diyname}"
               v-for="item in searchTypeData.article">{{item.name}}
          </div>
          <div @click="searchVideo(item.diyname,item.name)" :class="{type_color:typeColor === item.diyname}"
               v-for="item in searchTypeData.video">{{item.name}}
          </div>
          <div @click="searchHouse(item.id,item.name)" :class="{type_color:typeColor === item.id}"
               v-for="item in searchTypeData.house">{{item.name}}
          </div>
          <div @click="searchPremise(item.id,item.name)" :class="{type_color:typeColor === item.id}"
               v-for="item in searchTypeData.premises">{{item.name}}
          </div>
        </div>
      </div>

    </div>
    <div class="search_center">
      <div v-if="searchLabel === 1">
        <search-history v-if="historyTitle && historyName" :changeInputValue="changeInputValue" :searchHouList="searchHouList" :getHistory="getHistory"
                        :historyTitle="historyTitle" ref="history" :historyName="historyName"></search-history>
      </div>
      <div v-if="searchLabel === 2">
        <information-content v-if="content.data && searchAPi === 1" :content="content.data"></information-content>
        <list-content v-if="content.data && searchAPi === 3" :houseListData="content.data"></list-content>
        <hai-nan v-if="content.data && searchAPi === 2" :videoHaiNanList="content.data"></hai-nan>
        <new-house-list v-if="content.data && searchAPi === 4" :newHouseList="content.data"></new-house-list>
      </div>
    </div>
  </div>
</template>

<script>
  import SearchHistory from '../search/Search';
  import InformationContent from '../../components/listComponents/InformationContent';
  import HaiNan from '../../components/videoHaiNan/HaiNan';
  import ListContent from '../../components/listComponents/ListContent';
  import NewHouseList from '../../components/listComponents/NewHouseList';
  import {searchClassic, searchArticle, searchHouseList, searchVideoList, searchPremiseList,searchHot} from '../../axios/api';
  import {
    getCityName, getSearchType,
    saveIndexSearch, saveVideoSearch, saveNewsSearch, savepremiseSearch,
    loadIndexSearch, loadVideoSearch, loadNewsSearch, loadPremiseSearch
  } from '../../assets/js/cache';
  import alert from '../../store/modules/alert';

  export default {
    name: 'IndexSearch',
    data() {
      return {
        inputValue: '',
        searchOrCancel: false,
        // searchOrResult: false,
        searchTypeShow: false,
        searchTypeData: {},
        typeColor: '',
        historyName: 'index_search',
        historyTitle: [],
        searchLabel: 1,
        informationFormData: {
          city_id: getCityName().CODE,
          column_id: 1,
          page: 1,
          keywords: ''
        },
        content: [],
        searchFormData: {
          name: '',
          search: ''
        },
        searchAPi: 3,
        searchHouList:[]
      }
    },
    computed: {
      getSearchType() {
        return this.$store.getters.getSearchType;
      },

    },

    created() {
      // console.log(getSearchType());

      this.getSearchClassic();
      this.getHistory();
      this.getSearchHot();
     // console.log('000000000000');
      //console.log(this.$route);
    },
    watch: {
      inputValue() {
        if (this.inputValue !== '') {
          return this.searchOrCancel = true;
        } else {
          return this.searchOrCancel = false;
        }
      },
      // '$route' (to, from) {
      //   if (to.query.type){
      //     console.log(to.query.type)
      //   }
      //   console.log(to);
      //   console.log(from);
      // }
    },
    beforeRouteEnter(to, from, next){

      next(vm => {

        let name = from.name;
        // console.log(from.name);
        // console.log(this.searchAPi);
        console.log(vm.searchAPi);
        if(name === 'Information'){
          // console.log('资讯');
          vm.searchAPi = 1;
          vm.typeColor = 'dcxw';
          vm.searchFormData.name = 'dcxw';
          vm.historyName = 'video_search';
          vm.otherMethods();
        }else if(name === 'AllVideo'){
          // console.log('视频');
          vm.searchAPi = 2;
          vm.typeColor = 'sphn';
          vm.searchFormData.name = 'sphn';
          vm.historyName = 'news_search';
          vm.otherMethods();
        }else if(name === 'TwoHouse'){
          // console.log('二手房');
          vm.searchAPi = 3;
          vm.typeColor = 1;
          // vm.searchFormData.name = 'sphn';
          vm.historyName = 'index_search';
          vm.otherMethods();
        }else if(name === 'NewHouseDetails'){
          // console.log('楼盘');
          vm.searchAPi = 4;
          vm.typeColor = 2;
          vm.historyName = 'premise_search';
          vm.otherMethods();
        }else{
          vm.searchAPi = 3;
          vm.typeColor = 1;
          vm.historyName = 'index_search';
          vm.otherMethods();
        }
      })
    },
    methods: {
      //从别的页面调用
      otherMethods(){
        this.getSearchClassic();
        this.getHistory();
        this.getSearchHot();
      },
      //子组件修改父组件值  自定义方法
      changeInputValue(value) {
        this.inputValue = value;
        console.log(this.inputValue);
        console.log('9666');
      },
      //获取热门
      getSearchHot(){
        searchHot(this.searchAPi).then(res=>{
          console.log(res);
          this.searchHouList = res.data;
        }).catch(err=>{
          console.log(err);
        })
      },
      //获取历史记录
      getHistory() {
        if (this.historyName === 'news_search') {
          this.historyTitle = loadNewsSearch();
        } else if (this.historyName === 'index_search') {
          this.historyTitle = loadIndexSearch();
        } else if (this.historyName === 'video_search') {
          this.historyTitle = loadVideoSearch();
        }else if(this.historyName === 'premise_search'){
          this.historyTitle = loadPremiseSearch();
        }
      },
      //搜索资讯
      searchInformation(diyname, name) {
        console.log(diyname);
        console.log(name);
        this.historyName = 'news_search';
        this.historyTitle = loadNewsSearch();
        this.typeColor = diyname;
        this.searchFormData.name = diyname;
        this.$store.commit('setSearchType', name);
        this.searchAPi = 1;
        this.getSearchHot();
        this.closeTypeShow();
      },
      //搜索二手房
      searchHouse(id, name) {
        console.log(id);
        console.log(name);
        this.historyName = 'index_search';
        this.historyTitle = loadIndexSearch();
        this.typeColor = id;
        this.searchFormData.name = id;
        this.searchAPi = 3;
        this.getSearchHot();
        this.$store.commit('setSearchType', name);
        this.closeTypeShow();
      },
      //搜索新楼盘
      searchPremise(id, name) {
        console.log(id);
        console.log(name);
        this.historyName = 'premise_search';
        this.historyTitle = loadPremiseSearch();
        this.typeColor = id;
        this.searchFormData.name = id;
        this.searchAPi = 4;
        this.getSearchHot();
        this.$store.commit('setSearchType', name);
        this.closeTypeShow();
      },
      //搜索视频
      searchVideo(diyname, name) {
        console.log(diyname);
        console.log(name);
        this.historyName = 'video_search';
        this.historyTitle = loadVideoSearch();
        this.typeColor = diyname;
        this.searchFormData.name = diyname;
        this.$store.commit('setSearchType', name);
        this.searchAPi = 2;
        this.getSearchHot();
        this.closeTypeShow();
      },
      //点击打开类型
      changeTypeShow() {
        let rotate = document.getElementById('icon-xiala');
        if (this.searchTypeShow === false) {
          this.searchTypeShow = true;
          document.getElementsByTagName('body')[0].style.overflow = 'hidden';
          rotate.style.transform = 'rotate(' + 180 + 'deg)';
          rotate.style.transition = 'All 0.2s ease-in-out'
        } else {
          this.searchTypeShow = false;
          document.getElementsByTagName('body')[0].style.overflow = 'auto';
          rotate.style.transform = 'rotate(' + 360 + 'deg)';
        }

      },
      //关闭
      closeTypeShow() {
        this.searchTypeShow = false;
        document.getElementsByTagName('body')[0].style.overflow = 'auto';
        let rotate = document.getElementById('icon-xiala');
        rotate.style.transform = 'rotate(' + 360 + 'deg)';
      },
      //获取搜索栏目
      getSearchClassic() {
        searchClassic().then(res => {
          let fig = true;

          // res.data.data.forEach((item)=>{
          //     console.log('222222222222');
          //     console.log(item);
          // });
          // console.log(res.data);
          // this.searchTypeData = res.data;
          for(let item in res.data){
            res.data[item].forEach((items)=>{
                items['ids'] = parseInt(Math.random()*1000000000);
                if(fig){
                  items['isSelect'] = true;
                  fig = false;
                }
                items['isSelect'] = false;

            });
          }

          this.searchTypeData = res.data;

          console.log(res.data)

        }).catch(err => {
          console.log(err);
        })
      },
      //返回
      goBack() {
        document.getElementsByTagName('body')[0].style.overflow = 'auto';
        this.$router.go(-1);
        this.content.length = 0;
        this.searchLabel = 1;
        // this.searchOrResult = false;
      },
      //取消
      cancelSearch() {
        this.searchLabel = 1;
        this.getHistory();
      },
      //判断input有没有值 切换 取消 与搜索按钮
      searchGo() {

      },
      //搜索按钮
      searchResult() {
        this.searchFormData.search = this.inputValue;
        if (this.searchAPi === 1) {
          //资讯
          searchArticle(this.searchFormData).then(res => {
            console.log(res);
            this.content = res.data;
            this.searchLabel = 2;
            saveNewsSearch(this.searchFormData.search);
          }).catch(err => {
            console.log(err)
          })
        } else if (this.searchAPi === 3) {
          //二手房
          searchHouseList(this.inputValue).then(res => {
            console.log(res);
            this.content = res.data;
            this.searchLabel = 2;
            saveIndexSearch(this.inputValue);
          }).catch(err => {
            console.log(err);
          })
        } else if (this.searchAPi === 2) {
          //视频
          searchVideoList(this.searchFormData).then(res => {
            console.log(res);
            this.content = res.data;
            this.searchLabel = 2;
            saveVideoSearch(this.searchFormData.search);
          }).catch(err => {
            console.log(err);
          })
        } else if (this.searchAPi === 4) {
          //楼盘
          searchPremiseList(this.inputValue, getCityName().CODE).then(res => {
            console.log(res);
            this.content = res.data;
            this.searchLabel = 2;
            savepremiseSearch(this.searchFormData.search);
          }).catch(err => {
            console.log(err);
          })
        }

      },
      //叉号
      chaHao() {
        this.inputValue = '';
        this.searchGo();
      }
    },
    components: {
      NewHouseList,
      HaiNan,
      ListContent,
      SearchHistory,
      InformationContent
    }
  }
</script>

<style scoped>
  .background_modal {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100vw;
    height: 100vh;
  }

  #indexSearch {
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #f8f8f8;
  }

  .index_search {
    z-index: 99;
  }

  .index_search > div:nth-child(1) {
    height: 40px;
    background-color: #ffffff;
    padding: 0.5rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-direction: row;
    flex-wrap: nowrap;
    line-height: 40px;
    color: #333333;
    justify-content: space-between;
    width: calc(100% - 1rem);
  }

  .index_search .go_back {
    margin-right: 10px;
  }

  .index_search .search_content {
    background-color: #f8f8f8;
    border-radius: 0.5rem;
    margin-right: 10px;
    width: 100%;
    display: flex;
    padding: 0 0.5rem;
    /*justify-content: space-between;*/
  }

  .go_del {
    width: 3rem;
    text-align: center;
  }

  /*.index_search .search_content > div:nth-child(1) {*/
  /*width: 6rem;*/
  /*}*/
  .index_search .search_content .search_type {
    display: flex;
    margin-right: 10px;
  }
  .index_search .search_content .input {
    flex: 1;
  }

  .index_search .search_content .search_type > div {
    /*margin-right: 10px;*/
  }

  /*点击弹开类型列表*/
  .search_type_list {
    display: flex;
    background-color: #ffffff !important;
    flex-wrap: wrap;
    padding: 5px;
    font-size: 0.9rem;
  }

  .type_color {
    background-color: #ffffff;
    color: #e6191e;
    border: 1px solid #e6191e;
  }

  .search_type_list > div {
    margin: 5px 5px;
    width: calc(100% / 4 - 10px);
    box-sizing: border-box;
    padding: 5px;
    text-align: center;
    background-color: #eeeeee;
  }

  .index_search .search_content > div:nth-child(2) {
    /*width: 45%;*/
    /*flex: 3;*/
  }

  .index_search .search_content > div:nth-child(3) {

  }

  .index_search .search_content input {
    width: 100%;
    border: none;
    outline: none;
    /*border-left: 1px solid #dcdcdc;*/
    background-color: #f8f8f8;
  }

  .rotate_area {
    transform: rotate(180deg);
    transition: All 0.4s ease-in-out;
  }

  .index_search .search_content .chahao {
    color: #999;
  }
</style>
